<template>
    <div class="header">
         <span @click="toggleMenu">
             <el-icon-expand v-if="collapse"></el-icon-expand>
             <el-icon-fold v-else></el-icon-fold>
         </span>
    </div>
</template>

<script setup lang="ts">

    defineOptions({
        name: 'NavHeader'
    })

    let props = defineProps<{
        collapse: boolean
    }>()

    const emits = defineEmits(['update:collapse'])
    let toggleMenu = () => {
        emits('update:collapse', !props.collapse)
    }

</script>

<style scoped lang="scss">
    .header{
        height: 60px;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }
    svg{
        width: 1rem;
        height: 1rem;
    }
</style>
